<template>
  <el-dialog
    class="dialog"
    :visible.sync="showArticle"
    width="800px"
    v-if="showArticle"
    @click="showArticle = false" top='10vh'>
    <div slot="title">
        <h2 class="flex-justify-center mb16">{{info.title}}</h2>
        <p class="flex-justify-bcenter pr16 pl16 fb c-9"> <span >发布人：{{info.employee ? info.employee.name : '系统'}}</span> <span class="pl16">发布时间：{{info.created_at}}</span> </p>
    </div>
    <div v-html="info.content" class="content f-16"></div>
    <div v-if="showSend">
        <h3 class="mb8">接收人：</h3>
        <div>
            <el-tag class="mr8" v-for="(v,i) in sendList" :key="i">{{v}}</el-tag>
        </div>
    </div>
    <div slot="footer" v-if="info.attachments && info.attachments.length > 0" style="textAlign:left">
        <h3 class="mb8">附件：</h3>
        <el-image
            :z-index='3000'
            v-for="item in echoFiles(info.attachments,true)" :key='item.id'
            class="details_image"
            :src="uploadUrl + item.file_path" 
            :preview-src-list="srcList(echoFiles(info.attachments,true))">
        </el-image>
        <div class="mt8">
            <div v-for="item in echoFiles(info.attachments,false)" :key='item.id'>
                <p><span @click="upload(item.file_path,item.filename)" class="c-blue shou"> <i class="iconfont icon-ziyuan"></i>{{item.filename}}</span> </p>
            </div>
        </div>
    </div>
  </el-dialog>
</template>

<script>
import {uploadUrl} from '@/api/request'
import {ApiupLoadFiles} from '@/api'
import { debounce,utils_upload} from "@/utils";
import { isIMage} from "@/utils/test";

export default {
    props: {
        info:{
            default:()=>({employee:{}}),
            type: Object,
        },
        showSend:{
            default:false,
            type: Boolean
        }
    },
    
    data(){
        return{
            showArticle: false,
            uploadUrl:uploadUrl(),
        }
    },
    computed:{
        sendList(){
            if(this.info.send_type === 1) return this.info.role || []
            else if(this.info.send_type === 2) return this.info.people || []
            else return ['全部']
        } 
    },
    methods:{
        echoFiles(arr=[],flag=true){
            return arr.filter(item => isIMage(item.filename) === flag)
        },
        srcList(arr=[]){
            return arr.map(item => this.uploadUrl + item.file_path)
        },
        upload: debounce(function (url,name){
            // ApiupLoadFiles(url).then(res => {
            //     let a = document.createElement("a")
            //     a.href = URL.createObjectURL(res)
            //     a.download = name
            //     a.click()
            //     URL.revokeObjectURL(a.href)
            // })
            utils_upload(url,name)
        },500,true)
    }
};
</script>

<style lang='less' scoped>
 .content{
    min-height: 200px;
    margin-bottom: 32px;
}
.files_box{
    display: inline-block;
    margin-right: 16px;
}
</style>